<%--
  Created by IntelliJ IDEA.
  User: 96394
  Date: 2019/12/23
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">

<head>
    <title>任务分析</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/base.css" />
    <link rel="stylesheet" href="/css/base/base.css?20201106.1" />
    <link rel="stylesheet" href="/css/news/center.css" />
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/lib/laydate/skins/default/laydate.css">
    <link rel="stylesheet" href="/lib/bootstrap/3.3.7/css/bootstrap.css">
    <script src="/js/news/jquery-1.9.1.js"></script>
    <script src="/js/base/tablePage.js"></script>
    <script src="/js/news/page.js"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/layer/layer.js?20201106"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="/lib/highcharts.js"></script>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="/lib/bootstrap/3.3.7/js/html5shiv.min.js"></script>
    <script src="/lib/bootstrap/3.3.7/js/respond.min.js"></script>
    <![endif]-->

    <style>
        * {
            font-family: "Microsoft Yahei";
        }

        body,
        html {
            width: 100%;
            height: 100%;
            user-select: none;
        }

        .content_wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 10px;
            background-color: #e8edf7;
        }

        .content_module {
            position: relative;
            width: 100%;
            height: 100%;
            background: #fff;
        }

        .content_module .content_head {
            padding: 10px 20px;
            line-height: 30px;
            margin-bottom: 0;
        }

        .content_box {
            position: absolute;
            top: 50px;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 25px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .content_bottom {
            margin-top: 20px;
            position: relative;
        }

        .table {
            border-top: 1px solid #c0c0c0;
        }

        .table tr {
            border: none;
            border-bottom: 1px solid #c0c0c0;
        }

        .pagination-box {
            text-align: center;
        }

        .pagination-box a {
            cursor: pointer;
        }

        .pagination-box .disable>a {
            background-color: #bdbdbd !important;
            color: #696969 !important;
            cursor: default;
        }

        .total-box {
            position: relative;
            display: inline-block;
            margin: 20px 0;
            vertical-align: top;
            padding: 3px 12px;
            line-height: 1.42857143;
            color: #000;
            background-color: #fff;
        }
        .total-box>span {
            margin-right: 10px;
        }

        .total-box>input{
            width: 35px;
            padding: 0 2px;
            text-align: center;
            background-color: #ccc;
            border-radius: 5px;
        }

        .total-box .btnpage {
            margin-left: 5px;
            padding: 0 3px;
            border-radius: 5px;
            background: #ffa500;
            color: #231d1d;
        }

        .tasktrend_search {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1;
        }
    </style>
</head>

<body>
<div class="content_wrapper">
    <div class="content_module">
        <nav class="navbar navbar-default navbar-static-top content_head">
            任务分析
        </nav>
        <div class="content_box">
            <div class="content_top row">
                <div id="taskreportl" class="col-xs-7"></div>
                <div id="taskreportr" class="col-xs-5"></div>
            </div>
            <div class="content_bottom">
                <div class="tasktrend_search">
                    <span class="glyphicon glyphicon-menu-left date_prev" style="cursor: pointer;"></span>
                    <span class="start_date">0000-00-00</span> - <span class="end_date">0000-00-00</span>
                    <span class="glyphicon glyphicon-menu-right date_next" style="cursor: pointer;"></span>
                </div>
                <div id="tasktrend"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-lg" id="taskModal" tabindex="-1" role="dialog"
     aria-labelledby="userModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="userModalLabel">任务</h4>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>任务名称</th>
                            <th>负责人</th>
                            <th>开始日期</th>
                            <th>结束日期</th>
                        </tr>
                    </thead>
                    <tbody id="task_table">

                    </tbody>
                </table>
                <nav class="pagination-box" id="pagination">

                </nav>
            </div>
        </div>
    </div>

</div>
<script src="/js/task/pagination.js"></script>
<script>
    $(function () {
        var basePath = "<%=basePath%>";

        var taskType = 0;

        // 获取当前时间的前七天的时间
        var date = new Date();
        var today = date.getTime();
        var week = 1000 * 60 * 60 * 24 * 7;
        var startDate = today - (1000 * 60 * 60 * 24 * 6);
        Highcharts.setOptions({
            credits: {
                enabled: false
            },
            legend: {
                align: 'center',
                verticalAlign: 'top',
                borderWidth: 0
            }
        });

        // 初始化柱状图
        var chart1 = Highcharts.chart('taskreportl', {
            chart: {
                type: 'bar'
            },
            title: {
                text: '任务报表',
                align: 'left'
            },
            xAxis: {
                categories: ['任务总数', '已完成', '进行中', '已延期']
            },
            yAxis: {
                title: {
                    text: null
                },
                allowDecimals: false
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                taskType = this.id
                                getTaskList(1)
                                $('#taskModal').modal('show')
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        align: 'right',
                        color: '#FFFFFF',
                        x: -10,
                        style: {
                            "fontSize": "12px",
                            "fontWeight": "bold",
                            "textOutline": "none"
                        }
                    }
                }
            },
            series: [{
                name: '我的任务',
                data: []
            }],
            subtitle: {
                text: "数量统计",
                align: 'left'
            }
        });

        // 初始化饼状图
        var chart2 = Highcharts.chart('taskreportr', {
            chart: {
                type: 'pie'
            },
            title: {
                text: null
            },
            subtitle: {
                text: null
            },
            plotOptions: {
                pie: {
                    showInLegend: true,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            series: [{
                name: '所占比例',
                data: []
            }],
            legend: {
                itemMarginTop: 40
            },
        });

        // 初始化折线图
        var chart3Data = [{name: '新增任务', id: 1}, {name: '完成任务', id: 2}, {id: 3}];
        var chart3 = chart3 = Highcharts.chart('tasktrend', {
            series: chart3Data,
            title: {
                text: '任务趋势',
                align: 'left'
            },
            subtitle: {
                text: '七天一周期',
                align: 'left'
            },
            xAxis: {
                categories: []
            },
            yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, { // 第二个坐标轴，放置在右边
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true, // 通过此参数设置坐标轴显示在对立面
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],
            tooltip: {
                shared: true,
                crosshairs: true,
                // 时间格式化字符
                dateTimeLabelFormats: {
                    day: '%Y-%m-%d'
                }
            },
            plotOptions: {
                series: {
                    marker: {
                        lineWidth: 1
                    },
                    dataLabels: {
                        enabled: true,
                        x: -10,
                        style: {
                            "fontSize": "12px",
                            "fontWeight": "bold",
                            "textOutline": "none"
                        }
                    }
                }
            }
        });

        // 日期搜索按钮 向前搜索
        $('.date_prev').on('click', function () {
            startDate = startDate - week;
            getData();
        });

        // 日期搜索按钮 向后搜索
        $('.date_next').on('click', function () {
            startDate = startDate + week;
            getData();
        });

        // 获取任务趋势数据
        function getData() {

            var startTime = getTimeStr(startDate);
            var endTime = getTimeStr(startDate + (1000 * 60 * 60 * 24 * 6));

            $('.start_date').text(startTime);
            $('.end_date').text(endTime);

            $.get(basePath + 'taskAnalysis/queryTrendTask', {startDate: startTime}, function (res) {
                if (res.flag) {
                    var data = res.obj[0];
                    chart3.update({
                        series: initTrendData(data.data),
                        xAxis: {
                            categories: data.times
                        }
                    })
                }
            });
        }

        getData();

        // 获取柱状图数据
        $.get(basePath + 'taskAnalysis/queryAnalysisReport', function (res) {
            if (res.flag) {
                var barData = initBarData(res.obj[0]);
                chart1.series[0].setData(barData);
            }
        });

        // 获取饼状图数据
        $.get(basePath + 'taskAnalysis/queryPieTask', function (res) {
            if (res.flag) {
                var pieData = initPieData(res.obj[0]);
                chart2.series[0].setData(pieData);
            }
        });

        // 初始化柱状图数据
        function initBarData(data) {
            var barData = [];
            for (var i in data) {
                switch (i) {
                    case 'taskResultNumber':
                        barData.push({y: data[i], id: 1});
                        break;
                    case 'completed':
                        barData.push({y: data[i], id: 2});
                        break;
                    case 'processing':
                        barData.push({y: data[i], id: 3});
                        break;
                    case 'Postponed':
                        barData.push({y: data[i], id: 4});
                        break;
                    default:
                        break;
                }
            }

            barData.sort(function (a, b) {
                return a.id - b.id;
            })
            return barData;
        }

        // 初始化饼状图数据
        function initPieData(data) {
            var pieData = [];
            for (var i in data) {
                switch (i) {
                    case 'completed':
                        pieData.push({name: '已完成', y: data[i]});
                        break;
                    case 'processing':
                        pieData.push({name: '进行中', y: data[i]});
                        break;
                    default:
                        break;
                }
            }
            return pieData;
        }

        // 初始化任务趋势数据
        function initTrendData(data) {
            var trendData = [];
            data.forEach(function (item) {
                switch (item.name) {
                    case '新增任务':
                        trendData.push({name: item.name, id: 1, data: item.data});
                        break;
                    case '完成任务':
                        trendData.push({name: item.name, id: 2, data: item.data});
                        break;
                    case '剩余任务':
                        trendData.push({name: item.name, id: 3, data: item.data});
                        break;
                    default:
                        break;
                }
            });
            return trendData;
        }

        var pagination = {
            page: 1,
            pageSize: 5,
            totalCount: 0,
            onClick: function (page) {
                getTaskList(page)
            }
        }

        // 柱状图获取任务列表
        function getTaskList(page) {
            $.get(basePath + 'taskAnalysis/queryAnalysisTask', {type: taskType, page: page, pageSize: pagination.pageSize, userFlag: true}, function (res) {
                if (res.flag) {
                    var $table = $('#task_table');
                    var $pagination = $('#pagination');
                    $pagination.empty();
                    $table.empty();
                    pagination.page = page;
                    pagination.totalCount = res.totleNum;
                    $('#pagination').pagination(pagination);

                    res.obj.forEach(function (task) {
                        var $task = $('<tr><td style="word-break: break-all;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" title="'+task.taskName+'">' + task.taskName + '</td><td>' + task.manageUserName + '</td><td>' + task.startDate.split(" ")[0] + '</td><td>' + task.endDate.split(" ")[0] + '</td></tr>');
                        $table.append($task);
                    });
                }
            });
        }

        $('#taskModal').on('hidden.bs.modal', function(){
            $('#task_table').empty();
            $('#pagination').empty();
        });

        function getTimeStr (date) {
            var sDate = new Date(date);
            var month = sDate.getMonth() + 1 < 10 ? '0' + (sDate.getMonth() + 1) : sDate.getMonth() + 1;
            var day = sDate.getDate() < 10 ? '0' + sDate.getDate() : sDate.getDate();
            var time = sDate.getFullYear() + '-' + month + '-' + day;

            return time;
        }
    })
</script>
</body>

</html>
